<template>
    <div class="reply-item">
        <el-avatar :size="32" :src="reply.userAvatar" />
        <div class="reply-content">
            <div class="reply-header">
                <span class="username">{{ reply.userName }}</span>
                <template v-if="reply.replyUserName">
                    <span class="reply-to">回复</span>
                    <span class="username">{{ reply.replyUserName }}</span>
                </template>
                <span class="time">{{ reply.dateTime }}</span>
            </div>
            <div class="reply-text">{{ reply.content }}</div>
            <div class="reply-actions">
                <el-button link :class="{ 'liked': reply.isLike }" @click="handleLike">
                    <el-icon>
                        <LikeIcon :color="likeColor(reply.isLike)" />
                    </el-icon>
                    <span>{{ reply.likeCount }}</span>
                </el-button>
                <el-button link @click="$emit('reply-to-reply', reply.replyId)">
                    <span>回复</span>
                </el-button>
                <el-button v-if="canDelete" link type="danger" @click="handleDelete">
                    <span>删除</span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { ReplyDisplayDto } from '@/types/replyType';
import LikeIcon from '@/icons/likeIcon.vue';
import { getUserInfo } from '@/utils/persistUtils';

const props = defineProps<{
    reply: ReplyDisplayDto
}>();

const emit = defineEmits<{
    'delete-reply': [replyId: number]
    'like-reply': [replyId: number, isLike: boolean]
    'reply-to-reply': [replyId: number]
}>();

// 判断是否可以删除
const canDelete = computed(() => {
    return props.reply.userId === getUserInfo().id;
});

const likeColor = (isLike: boolean) => {
    return isLike ? "#1296db" : "#8a8a8a";
}

// 处理点赞
const handleLike = () => {
    emit('like-reply', props.reply.replyId, props.reply.isLike);
};

// 处理删除
const handleDelete = () => {
    emit('delete-reply', props.reply.replyId);
};
</script>

<style scoped>
.reply-item {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.reply-content {
    flex: 1;
}

.reply-header {
    margin-bottom: 6px;
}

.username {
    font-weight: bold;
    margin-right: 5px;
}

.reply-to {
    color: #666;
    margin: 0 5px;
}

.time {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
}

.reply-text {
    margin-bottom: 6px;
    line-height: 1.5;
}

.reply-actions {
    display: flex;
    gap: 15px;
}

.liked {
    color: #409EFF;
}
</style>
